<template>
  <div class="simpleDisplay">
    <slot name="item" :item="songList">
      <div class="imgContainer">
        <img class="imgofSongList" :src="songList.picUrl" alt="" />
        <div class="playCountofSongList flex between align_c">
          <div>
            <SvgIcon icon="icon-V"></SvgIcon>
            <span class="fs-12 num"
              >{{
                songList.playCount > 100000
                  ? (songList.playCount / 100000).toFixed(0) + '万'
                  : songList.playCount
              }}
            </span>
          </div>
          <SvgIcon icon="icon-bofang2-copy"></SvgIcon>
        </div>
      </div>

      <span class="textofSongList">{{ songList.name }}</span>
    </slot>
  </div>
</template>

<script lang="ts">
export default {
  name: '',
}
</script>

<script lang="ts" setup>
import { songListItem, songLists } from '@/api/model/songList'
import { ref, reactive } from 'vue'
import SvgIcon from '@/components/SvgIcon/index.vue'
const props = defineProps<{ songList: songListItem }>()
let { songList } = props
</script>

<style scoped>
.simpleDisplay {
  cursor: pointer;
  min-width: 140px;
}
.imgContainer {
  position: relative;
}
.num {
  margin-left: 5px;
}
.playCountofSongList {
  position: absolute;

  width: 100%;
  height: 25px;
  padding: 0 8px;
  line-height: 25px;
  bottom: 0;
  color: #c0c0c0;

  background: rgba(0, 0, 0, 0.7);
}
</style>

<style lang="less"></style>
